<script setup name="myTopNav">
import { ref } from 'vue';
import { computed } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
const store = useStore();
const router = useRouter();
// 引入变量(state)
const info = computed(() => store.state.user.info);
// console.log(info.value);
// const emits = defineEmits([
//   'logOut',
// ]);
function logOut() {
  localStorage.removeItem('userInfo');
  store.commit('user/SET_INFO', {});
  router.push('/login');
}
</script>

<template>
  <div class="nav-container">
    <ul class="w">
      <li>
        <el-icon class="icon"><User /></el-icon>
        {{ info.account }}
      </li>
      <li>|</li>
      <li @click="logOut">退出登录</li>
      <li>|</li>
      <li>我的订单</li>
      <li>|</li>
      <li>会员中心</li>
      <li>|</li>
      <li>帮助中心</li>
      <li>|</li>
      <li>关于我们</li>
      <li>|</li>
      <li>手机版</li>
    </ul>
  </div>
</template>

<style scope lang="scss">
$color : #5bb79c;
body {
  margin: 0;
}
.nav-container {
  width: 100%;
  background-color: #333333;

  .w {
    width: 1240px;
    height: 53px;
    margin: 0 auto;
    background-color: #333333;
    display: flex;
    justify-content: end;
    align-items: center;

    li:nth-child(2n-1) {
      color: #cdcdcd;
      padding: 0 15px;
      font-size: 14px;
    }

    li:nth-child(2n-1):hover {
      color: $color;
      cursor: pointer;
    }

    li:nth-child(2n) {
      color: #666666;
    }

    .icon {
      vertical-align: middle
    }
  }
}

</style>
